<template>
	<view class="nav">
		<view :style="'height:'+status+'rpx;'+containerStyle"></view>
		<view v-if="isHome" class="headNav" :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;padding-left:20rpx;'">
			<text class="city">中部地区</text>
				<view style="flex: 1;"> 
					<navigator
						url="/pages/search/index"
						:style="
						'height:'+menu.height*2+
						'rpx;line-height:'+
						menu.height*2+
						'rpx;margin-top:'+
						(menu.top*2 -status)+
						'rpx;margin-left:32rpx;margin-right:'+
						(menu.width*2+24)+
						'rpx;background : #f4f4f4;border-radius:200rpx;text-align:center'
						"
					>
						<text class="search-text">
							找医院
						</text>
					</navigator>
				</view>
		</view>
		<view v-else class="navbar" :style="'height:'+navHeight+'rpx;'+containerStyle">
			<view class="back-icon" @click="backOrhome">
				<image v-if="pages > 1" src="../../static/resource/navbar/ic_back.png"></image>
				<image v-else src="../../static/resource/navbar/ic_home.png"></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;'+textStyle">{{titleText}}</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { ref,reactive,onBeforeMount,defineProps } from 'vue';
	const props=defineProps({
		background :{
			type :String,
			default : 'rgba(255,255,255,1)'
		},
		color:{
			type :String,
			default : 'rgba(0,0,0,1)'
		},
		fontSize:{
			type :String,
			default : 32
		},
		iconWidth:{
			type :String,
			default : 116
		},
		iconHeight:{
			type :String,
			default : 38
		},
		titleText:{
			type:String,
			default:''
		},
		isHome :{
			type:Boolean,
			default:false
		}
	})
	onBeforeMount(()=>{
		setNavSize()
		setStyle()
	})
	//计算状态拦高度
	const status =ref(0)
	const navHeight = ref(0)
	const containerStyle =ref('')
	const textStyle =ref('')
	const iconStyle =ref('')
	const pages=ref(getCurrentPages().length)
	const menu =reactive(uni.getMenuButtonBoundingClientRect())
	const setNavSize=()=>{
	const {system,statusBarHeight}=uni.getSystemInfoSync()
	status.value=statusBarHeight * 2
	const isIOS =system.indexOf('iOS') > -1
	if(!isIOS){
		navHeight.value=96
	}else{
		navHeight.value=88
	}
	
	}
	const backOrhome =()=>{
		if(pages.value>1){
			uni.navigateBack()
		}else{
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
		
	}
	const setStyle =() =>{
		containerStyle.value=['background:'+props.background].join(';')
		textStyle.value=['color:'+props.color,'font-size:'+props.fontSize+'rpx'].join(';')
		iconStyle.value=['width:'+props.iconWidth+'rpx','height:'+props.iconHeight+'rpx'].join(';')
	}
</script>

<style>
	.nav{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.back-icon{
		display: flex;
		align-items: center;
		width: 64rpx;
		height: 100%;
		margin-left: 20rpx ;
	}
	.back-icon image{
		width: 64rpx;
		height: 64rpx; 
	}
	.navbar{
		position: relative;
	}
	.nav-title{
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%);
	}
	.headNav{
		display: flex;
	}
	.city {
	    display: inline-block;
	    position: relative;
	    font-size: 30rpx;
	    font-weight: bold;
	    padding-left: 55rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 40rpx;
	}
	
	.city:after {
	    content: ' ';
	    display: inline-block;
	    height: 6px;
	    width: 6px;
	    border-width: 1px 1px 0 0;
	    border-color: #353535;
	    border-style: solid;
	    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    position: relative;
	    top: -2px;
	    position: absolute;
	    top: 50%;
	    margin-top: -4px;
	    right: -10px;
	}
	.search-text {
	    display: inline-block;
	    padding-left: 30rpx;
	    color: #bbbbbb;
	    font-size: 26rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 23rpx;
	}
	.nav2-list {
	    margin: 10rpx 20rpx 0 20rpx;
	}
	.nav2-list::after {
	    content: '';
	    display: block;
	    height: 0;
	    line-height: 0;
	    clear: both;
	    visibility: hidden;
	}
	.nav2-item {
	    float: left;
	    margin-top: 20rpx;
	    width: 50%;
	    text-align: center;
	    box-sizing: border-box;
	    padding: 0 5rpx;
	}
	.nav2-pic {
	    width: 100%;
	}
	.nav2-pic image {
	    display: block;
	    width: 100%;
	}
	.nav-list::after {
	    content: '';
	    display: block;
	    height: 0;
	    line-height: 0;
	    clear: both;
	    visibility: hidden;
	}
	.nav-item {
	    float: left;
	    margin-top: 20rpx;
	    width: 20%;
	    text-align: center;
	    padding: 10rpx 0;
	}
	.nav-pic image {
	    display: block;
	    margin: 0 auto;
	    width: 110rpx;
	    height: 110rpx;
	}
	.nav-text {
	    font-size: 24rpx;
	    font-weight: bold;
	    white-space: nowrap;
	    overflow: hidden;
	}
	
	.hosp-list {
	    margin: 10rpx 0 0 0;
	    background: none;
	}
	.hosp-list::before {
	    display: none;
	}
	.hosp-list::after {
	    display: none;
	}
	
	.hosp-item {
	    -webkit-box-align: stretch;
	    -webkit-align-items: stretch;
	    align-items: stretch;
	    padding: 20rpx;
	    margin: 20rpx;
	    border-radius: 10rpx;
	    overflow: hidden;
	    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);
	}
	.hosp-item::before {
	    display: none;
	}
	.hosp-item::after {
	    display: none;
	}
	.hosp-name {
	    font-weight: bold;
	    font-size: 34rpx;
	}
	.hosp-avatar {
	    display: block;
	    width: 200rpx;
	    height: 180rpx;
	    border-radius: 10rpx;
	    overflow: hidden;
	    margin-right: 20rpx;
	}
	.hosp-line {
	    margin-top: 5rpx;
	}
	.hosp-line text {
	    font-size: 26rpx;
	}
	.hosp-rank {
	    font-weight: bold;
	    color: #0bb585;
	    margin-right: 15rpx;
	}
	.hosp-label {
	    font-weight: bold;
	    color: #0ca7ae;
	    margin-right: 15rpx;
	}
	.hosp-intro {
	    color: #999999;
	}
</style>